<template>
    <div class="prop-parper-A4">
        <el-form size="mini" label-suffix="：" label-width="80px">
            <el-form-item label="布局">
                <el-radio-group v-model="data.options.layout" @change="changeLayout">
                    <el-radio-button label="row">横向</el-radio-button>
                    <el-radio-button label="column">纵向</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="上边距">
                <el-input-number v-model="data.options.paddingTop" :controls="false" :min="0" :max="100"></el-input-number>
                <span class="unit">(毫米)</span>
            </el-form-item>
            <el-form-item label="下边距">
                <el-input-number v-model="data.options.paddingBottom" :controls="false" :min="0" :max="100"></el-input-number>
                <span class="unit">(毫米)</span>
            </el-form-item>
            <el-form-item label="左边距">
                <el-input-number v-model="data.options.paddingLeft" :controls="false" :min="0" :max="100"></el-input-number>
                <span class="unit">(毫米)</span>
            </el-form-item>
            <el-form-item label="右边距">
                <el-input-number v-model="data.options.paddingRight" :controls="false" :min="0" :max="100"></el-input-number>
                <span class="unit">(毫米)</span>
            </el-form-item>
            <el-form-item label="页码">
                <el-switch v-model="data.options.isPage" active-color="#1890ff" inactive-color="#ccc"></el-switch>
            </el-form-item>
            <el-form-item label="页码位置" v-if="data.options.isPage">
                <el-radio-group v-model="data.options.pagePosition">
                    <el-radio-button label="left">左边</el-radio-button>
                    <el-radio-button label="right">右边</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="水印">
                <el-switch v-model="data.options.watermark" active-color="#1890ff" inactive-color="#ccc" @change="handleWatermark"></el-switch>
            </el-form-item>
            <el-alert title="A4纸宽高值(210/297) / 横向(297/210)" type="success"></el-alert>
            <el-form-item label="设计宽度">
                <el-input-number v-model="data.options.designWidth" :controls="false" :min="210" :max="400"></el-input-number>
                <span class="unit">(毫米)</span>
            </el-form-item>
            <el-form-item label="设计高度">
                <el-input-number v-model="data.options.designHeight" :controls="false" :min="210" :max="400"></el-input-number>
                <span class="unit">(毫米)</span>
            </el-form-item>
            <el-form-item label="无值隐藏">
                <el-switch v-model="data.options.dataShow" active-color="#1890ff" inactive-color="#ccc"></el-switch>
                <el-input v-if="data.options.dataShow" v-model.trim="data.options.dataShowField" type="textarea" :rows="4" placeholder="根据Api配置绑定字段，多个绑定字段使用逗号分隔如： field1, field2"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import Observer from "@/utils/eventBus.js";
export default {
    name: "PropParperA4",
    props: {
        data: {
            type: Object
        },
        Api: {
            type: Object
        }
    },
    methods: {
        handleWatermark(val) { // 处理水印
            Observer.$emit('designPaper', {
                type: 'watermark',
                val
            })
        },
        changeLayout(val) { // 布局change
            if (val === 'column') {
                this.data.options.designWidth = 210;
                this.data.options.designHeight = 297;
            } else if (val === 'row') {
                this.data.options.designWidth = 297;
                this.data.options.designHeight = 210;
            }
        }
    }
}
</script>
